<template>
  <div :class="styles.myPage">
    <!-- 头部 -->
    <div :class="styles.myPageTop">
      <img src="../assets/img/my/myTop.jpg" alt="" />
    </div>

    <!-- 用户 -->
    <div :class="styles.myUser">
      <div :class="styles.left">
        <div :class="styles.userInfo"  @click="handleClick('center')">
          <span>{{ config.my.name }}</span>
          <span>{{ config.my.phone }}</span>
          <RightOutlined :style="{ fontSize: '12px', fontWeight: 'bold' }" />
        </div>
        <div :class="styles.userInfoBottom">
          <img src="../assets/img/my/start.jpg" alt="" />
          <span>{{ config.my.ageStr }}</span>
        </div>
      </div>
      <div :class="styles.right">
        <img src="../assets/img/my/head.jpg" alt="" />
      </div>
    </div>

    <!--rest  -->
    <div :class="styles.reset">
      <img src="../assets/img/my/myReset.jpg" alt="" />
    </div>

    <div :class="styles.bottomNav">
      <div :class="styles.navItem" @click="handleClick('')">
        <div :class="styles.navIcon">
          <img :src="homeImg" alt="" />
        </div>
      </div>
      <div :class="styles.navItem">
        <div :class="styles.navIcon" :style="{ width: '38px' }">
          <img src="../assets/img/home/home_cx.jpg" alt="" />
        </div>
      </div>
      <div :class="styles.navItem">
        <div :class="styles.navIcon" :style="{ width: '28px' }">
          <img src="../assets/img/home/xbk.jpg" alt="" />
        </div>
      </div>
      <div :class="styles.navItem">
        <div :class="styles.navIcon">
          <img
            src="../assets/img/home/xx.jpg"
            alt=""
            :style="{ width: '30px' }"
          />
        </div>
      </div>
      <div :class="styles.navItem" @click="handleClick('my')">
        <div :class="styles.navIcon" :style="{ width: '23px' }">
          <img :src="myActiveImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import styles from "./My.module.less";
import { RightOutlined } from "@ant-design/icons-vue";
import homeImg from "../assets/img/home/home.jpg";
import myActiveImg from "../assets/img/home/my_active.jpg";
import config from "../config";
import { useRouter } from "vue-router";
const router = useRouter();
const handleClick = (path) => {
  router.push(`/${path}`)


};
</script>

